<template>
	<view>
		<view>
			<p>abc</p>
		</view>
		<view class="ps-swiper">
			<view :class="{'ps-swiper-container':isTrue,'move':isMove}" @touchstart="touchstartEvent" @touchmove="touchmoveEvent"
			 @touchend="touchendEvent" :style="{ left: initLeft + 'rpx' }">
				<view class="ps-swiper-item" style="background-color: #007AFF;">1</view>
				<view class="ps-swiper-item" style="background-color: #aa00ff;">2</view>
				<view class="ps-swiper-item" style="background-color: #ffff7f;">3</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTrue: true,
				isMove: false, //控制是否应用move类
				state: 0, //监控鼠标事件，鼠标落下之后才开始动作
				oldEvent: null, // 用来记录鼠标上次的位置
				initLeft: 0, //rpx ;//ps-swiper-container初始left值
				initIndex: 0, // 记录当前滑块的顺序（从0开始）

				moveLeft: 0,
			}
		},
		onLoad() {
			console.log(this.initLeft);
		},
		methods: {
			flashIndex: function() {

			},
			touchstartEvent: function(event) {
				// console.log(event);
				this.isMove = false;
				this.moveLeft = 0;
				this.oldEvent = event; // 当鼠标按下时候记录初始位置
				this.state = 1;
				//console.log("event 事件："+event.touches[0].pageX);
				console.log("手指按下了");
			},
			touchmoveEvent: function(event) {
				if (this.state != 1) {
					return
				}; // 只有当state == 1时候才允许执行该事件
				this.moveStart = event.touches[0].pageX;
				// 用当前鼠标的位置来和上次鼠标的位置作比较
				// 如果当前鼠标的pageX小于上次鼠标的pageX，那就表示鼠标在向左拖动，就需要把容器left值减去鼠标移动的距离
				if (event.touches[0].pageX < this.oldEvent.touches[0].pageX) {
					this.initLeft -= this.oldEvent.touches[0].pageX - event.touches[0].pageX;
					// this.initLeft -= 300;
					this.moveLeft++;
				} else {
					this.initLeft += event.touches[0].pageX - this.oldEvent.touches[0].pageX;
					this.moveLeft--;
				}
				// 完事之后记得把当前鼠标的位置赋值给oldEvent
				this.oldEvent = event;

				// console.log(this.initLeft);
				// console.log("手指移动了");
			},
			touchendEvent: function(event) {
				// console.log(event);
				console.log("this.moveLeft" + this.moveLeft);
				if (this.moveLeft > 3) {
					this.initIndex++;
					if (this.initIndex == 3) {
						this.initIndex--;
					} //右边界，不能滑动到超一屏
				} else if (this.moveLeft < -3) {
					this.initIndex--;
					if (this.initIndex < 0) {
						this.initIndex = 0;
					} //左边界，不能滑动到负一屏
				}
				this.isMove = true;
				console.log("this.initIndex" + this.initIndex);
				this.initLeft = this.initIndex * -300;
				this.state = 0;
				console.log("手指起来了");
			}
		}
	}
</script>

<style>
	.ps-swiper {
		width: 300rpx;

		/* 下面是为了让大家看的更清楚，加的修饰 */
		padding: 30rpx 0;
		margin: 0 auto;
		background: #FFB973;
	}

	.ps-swiper .ps-swiper-container {
		position: relative;
		/* 为啥要设置-300px呢，因为我想让他默认在第二个滑块的位置，一会会给大家演示 */
		/* left: -300rpx; */
		/* 让容器尽可能的宽，这样才能容纳更多的滑块 */
		width: 10000%;
		/* 让内部滑块可以排成一行 */
		display: flex;
		/* 滑动时有动画：如果元素的left值变更，会有一个0.2s的过渡动画（补间动画） */
		/* transition: left 0.2s ease-in-out; */

		/* 下面是为了让大家看的更清楚，加的修饰 */
		background: red;
		padding: 15rpx 0;
	}

	.move {
		transition: left 0.2s ease-in-out;
	}

	.ps-swiper .ps-swiper-container .ps-swiper-item {
		/* 宽度设置1%会按照外层视图的宽度来铺满 */
		width: 1%;
		height: 375rpx;
		background: #eee;

	}
</style>
